<template>
	<el-dialog title="文档导出" :visible.sync="visible" width="870px" :center="false" >
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-download"></i>
			<span>文档导出</span>
		</div>

		<div class="reequirementBody">
			<el-form :inline="false" label-width="140px" size="mini" ref="form" :model="form" :rules="rules">
				<el-row>
					
				
					
					
					<el-col :span="12">
						<el-form-item label="需求编号:" prop="qmsNo"  >
							<el-input v-model="form.qmsNo" placeholder="需求编号" disabled> </el-input>
						</el-form-item> 
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="需求名称:" prop="qmsName"  >
							<el-input v-model="form.qmsName" placeholder="需求名称" disabled> </el-input>
						</el-form-item> 
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="批次号:" prop="batchNum"  >
							<el-select v-model="form.batchNum"  clearable style="width: 100%" placeholder="批次号"   disabled>	
								<el-option v-for="item in dict('SMP0010')" :key="item.itemCode"
									:label="item.itemName" :value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item> 
					</el-col>
					<el-col :span="12">
					<el-form-item label="主系统:">
						<el-select v-model="form.mainSystemNo" clearable  style="width: 100%" filterable remote
							reserve-keyword placeholder="主系统"   disabled>
							<el-option v-for="item in systemListAll" :key="item.systemNo"
								:label="item.systemName" :value="item.systemNo">
								<span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
								<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span>
							</el-option>
						</el-select>
					</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
						<el-form-item label="文档类型:" prop="docType"  >
							<el-select v-model="form.docType"  clearable style="width: 100%" placeholder="文档类型">	
								<el-option v-for="item in dict('SMP0031')" :key="item.itemCode"
									:label="item.itemName" :value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item> 
					</el-col> -->
					</el-row>
						<el-row>
				<!-- 	<el-col :span="12">
							<el-form-item label="审核人:" prop="reviewer"  >
								<el-select v-model="form.reviewer" style="width: 100%" filterable remote clearable
									reserve-keyword placeholder="审核人" :remote-method="getUsers"  @change="getList">
									<el-option v-for="item in userList" :key="item.userName"
										:label="item.userChineseName" :value="item.userName">
										<span
											style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
										<span style="float: right;margin-right: 3px;">{{ $store.getters.getUser(item.userName).orgName }}</span>
									</el-option>
								</el-select>
							</el-form-item> 
						</el-col> -->
					<el-col :span="12"  v-if="form.docType=='01'">
						<el-form-item label="ESB需求编号:" prop="esbQmsNo"  >
							<el-input v-model="form.esbQmsNo" placeholder="ESB需求编号" > </el-input>
						</el-form-item> 
					</el-col>
					<el-col :span="12" v-if="form.docType=='01'">
						<el-form-item label="ESB需求名称:" prop="esbQmsName"  >
							<el-input v-model="form.esbQmsName" placeholder="ESB需求名称" > </el-input>
						</el-form-item> 
					</el-col>
					<!-- <el-col :span="12"  v-if="form.docType=='02'">
						<el-form-item label="外联ESB需求编号:" prop="oesbQmsNo"  >
							<el-input v-model="form.oesbQmsNo" placeholder="外联ESB需求编号" > </el-input>
						</el-form-item> 
					</el-col>
					<el-col :span="12"  v-if="form.docType=='02'">
						<el-form-item label="外联ESB需求名称:" prop="oesbQmsName"  >
							<el-input v-model="form.oesbQmsName" placeholder="外联ESB需求名称" > </el-input>
						</el-form-item> 
					</el-col> -->
					
					
			 <el-col :span="12">
					<el-form-item label="估算日期:" prop="evaluateDate">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"
							v-model="form.evaluateDate" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>	
					
					<el-col :span="12">
					<el-form-item label="发布日期:" prop="pubDate" >
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"
							v-model="form.pubDate" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
			
				
				
				<el-col :span="24">
					<el-form-item label="测试周期:" prop="testCycle">
						<el-date-picker value-format="yyyy.MM.dd" style="width: 100%"
							v-model="form.testCycle" type="daterange" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				
				<el-col :span="24">
					<el-form-item label="Hosts:" prop="esbHostConfig"  >
						<el-input type="textarea" v-model="form.esbHostConfig" placeholder="Hosts" > </el-input>
					</el-form-item> 
				</el-col>
				
				
			<!-- <el-col :span="24">
					<el-form-item label="审核人:" prop="oesbQmsName"  >
						<el-input  v-model="form.oesbQmsName" placeholder="审核人" > </el-input>
					</el-form-item> 
				</el-col> -->
				 <el-col :span="16">
					<el-form-item label="测试截图:" >
						<el-upload :on-change="changeFile" :before-upload="beforUpload" size="mini"
							:show-file-list="true" multiple :auto-upload="false" :file-list="fileList"
							action="#" list-type="picture"  :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> 
							<el-button style="width: 200px;" size="mini"><i class="el-icon-upload" />添加测试截图
							</el-button>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible" append-to-body>
							<img width="100%"  :src="dialogImageUrl" alt=""/>
						</el-dialog>
						<!-- <div v-for="item in fileList" class="fileList">
							<el-link @click="downFile(item)" type="primary" :underline="false">
								<i class="el-icon-document"></i> {{item.name}}
							</el-link>
							<el-link type="success" @click="deleteFile(item)" :underline="false"style="float: right;">
								<i class="el-icon-close"></i>
							</el-link>
						</div> -->
						
					</el-form-item>
				</el-col>	
					
					
					
				</el-row>
			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button @click="visible = false" size="mini">取 消</el-button>
			<el-button type="primary" plain @click="submit" size="mini">确 定</el-button>
			 -->
			
			<el-button type="primary" plain @click="submit" size="mini">
				<i class="el-icon-check"></i>
				确定</el-button>
			<el-button @click="visible = false" size="mini">
				<i class="el-icon-close"></i>
				取消</el-button>
		</span>
	</el-dialog>
</template>
<script>
	"use strict";
import {updateRequirement,updateRequirementAnnex,getFileList,appendixDown} from '@/api/requirementBatch.js';
	import {
		exportDocument
	} from '@/api/document.js';
	

	export default {
		data() {
			return {
				visible: false,
				proLoading:false,
				fileList: [],
				
				dialogImageUrl:"",
				dialogVisible:false,
				
				form: {
					qmsNo: "",
					qmsName: "",
					batchNum: "",
					mainSystemNo: "",
					esbQmsNo: "",
					esbQmsName: "",
					oesbQmsNo:"", 
					oesbQmsName:"", 
					reviewer:'',
					docType:'01',
					evaluateDate:"",
					pubDate:"",
					testCycle:"",
					esbHostConfig:"",
					oesbHostConfig:""
				},
				rules:{
					 esbQmsNo: [{
						required: true,
						message: '请输入ESB子需求编号',
						trigger: 'blur'
					}],
					esbQmsName: [{
						required: true,
						message: '请输入ESB子需求名称',
						trigger: 'blur'
					}],
					oesbQmsNo: [{
						required: true,
						message: '请输入ESB子需求编号',
						trigger: 'blur'
					}],
					oesbQmsName: [{
						required: true,
						message: '请输入ESB子需求名称',
						trigger: 'blur'
					}],
					pubDate: [{
						required: true,
						message: '请输入发布日期',
						trigger: 'blur'
					}],
					evaluateDate: [{
						required: true,
						message: '请输入估算日期',
						trigger: 'blur'
					}],
					reviewer: [{
						required: true,
						message: '请输入审核人',
						trigger: 'blur,change'
					}],
					testCycle: [{
						required: true,
						message: '请输入测试凑齐',
						trigger: 'blur,change'
					}],
					docType: [{
						required: true,
						message: '请输入文档类型',
						trigger: 'blur,change'
					}],
					
					 
				},
	
			}

		},
		methods: {
			
			
			changeFile(file, fileList) {
				//file.href=window.URL.createObjectURL(file.raw);
				//console.info(file.href);
				this.fileList = this.fileList.filter(item => {
					return item.name != file.name
				})
				this.fileList.push(file);
			
			},
			
			beforUpload(file) {
				console.info("eee");
				let fileList1 = this.fileList.filter(item => {
					return item.name == file.name
				})
				if (fileList1.length > 0) {
					this.$message.error("附件已存在，请删除原有附件后上传");
					return false;
				}
			},
			
			//预览
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible=true;
			},
			
			deleteFile(file, fileList) {
				this.fileList = this.fileList.filter(item => {
					return item.name != file.name
				})
				this.fileList = fileList;
			},
			
			handleRemove(file, fileList) {
				this.fileList = fileList;
				console.log(file,fileList);
			},
			
			ShowDialog(data) {
				Object.assign(this.form,data);
				this.getList();
				this.visible = true;
				
			},
			handleCancel(e) {
				this.visible = false;
			},
			
			getList() {
				getFileList(this.form).then(response => {
					
					let obj = response.data.extend;
					
					this.fileList = [];
					obj.forEach(item => {
						
						appendixDown({
							fileName:item.fileName,
							qmsNo:item.qmsNo,
							batchNum:item.batchNum
						}).then(res => {
									
							let name = item.fileName;
							const blob = new Blob([res.data]);
							const blobURL = window.URL.createObjectURL(blob);
							
							this.fileList.push({
								name: name,
								url:blobURL
							});
						})
					})
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			
			
			
			// downFile(file) {
			// 	console.info(file.raw)
			// 	if (file.raw == undefined) {
			// 		console.info("后台下载文件");
			// 		appendixDown({
			// 			fileName: file.name,
			// 			qmsNo:this.form.qmsNo,
			// 			batchNum:this.form.batchNum
			// 		}).then(res => {
			
			// 			let name = file.name;
			// 			const blob = new Blob([res.data]);
			// 			const blobURL = window.URL.createObjectURL(blob);
			// 			const aLink = document.createElement('a');
			// 			aLink.href = blobURL;
			// 			aLink.setAttribute('download', name);
			
			// 			if (typeof aLink.download === 'undefined') {
			// 				aLink.setAttribute('target', '_blank');
			// 			}
			// 			aLink.style.display = 'none';
			// 			document.body.appendChild(aLink);
			// 			aLink.click();
			// 			document.body.removeChild(aLink);
			// 			window.URL.revokeObjectURL(blob);
			// 		})
			// 	} else {
			// 		let name = file.name;
			// 		const blobURL = window.URL.createObjectURL(file.raw);
			// 		const aLink = document.createElement('a');
			// 		aLink.href = blobURL;
			// 		aLink.setAttribute('download', name);
			
			// 		if (typeof aLink.download === 'undefined') {
			// 			aLink.setAttribute('target', '_blank');
			// 		}
			// 		aLink.style.display = 'none';
			// 		document.body.appendChild(aLink);
			// 		aLink.click();
			// 		document.body.removeChild(aLink);
			// 		window.URL.revokeObjectURL(file.raw);
			// 	}
			
			// },
			
			
			
			submit() {//新增
				this.$refs["form"].validate((valid)=>{
					if(valid){
						
						//数据处理
						if(!this.form.testCycle.includes('-')){
							this.form.testCycle=this.form.testCycle.join('-');
						}
						
						let data = new FormData();
						data.append("qmsNo",this.form.qmsNo);
						data.append("batchNum",this.form.batchNum);
						
						data.append("reviewer",this.form.reviewer);
						data.append("esbQmsNo",this.form.esbQmsNo);
						data.append("esbQmsName",this.form.esbQmsName);
						/* data.append("oesbQmsNo",this.form.oesbQmsNo);
						data.append("oesbQmsName",this.form.oesbQmsName); */
						data.append("evaluateDate",this.form.evaluateDate);
						data.append("pubDate",this.form.pubDate);
						// data.append("testCycle",this.form.testCycle.join('-'));
						data.append("testCycle",this.form.testCycle);
						data.append("hostConfig",this.form.esbHostConfig);
						data.append("docType",this.form.docType);
						if (this.fileList.length ==0) {
							this.$message.error("请上传截图");
							return false;
						}
						
						//提交附件信息
						this.fileList.forEach(file => {
							console.info(file);
							if (file != undefined) {
								data.append("files", file.raw);
							}
						})
						
						this.fileList.forEach(file => {
							console.info(file);
							data.append("fileNameList", file.name);
						})
						
						// updateRequirement(this.form).then(response => {
						// 	if(response.data.code == "0000"){
						// 		this.$message.success(response.data.message);
						// 	}else{
						// 		this.$message.error(response.data.message);
						// 	}
						// 	this.visible = false;
						// 	this.$emit("fresh")
							
						// }).catch(error => {
						// 	this.$message.error(error.message);
						// });
						
						// updateRequirementAnnex(data).then(response => {
						// 	if(response.data.code == "0000"){
						// 		this.$message.success(response.data.message);
						// 	}else{
						// 		this.$message.error(response.data.message);
						// 	}
						// }).catch(error => {
						// 	this.$message.error(error.message);
						// });
						
						
						const loading = this.$loading({
								lock: true,
								text: '数据处理中，请耐心等待',
								spinner: 'el-icon-loading'
							})
							exportDocument(data).then(res => {
								loading.close();
								let name = this.form.qmsNo+"_ESB_投产文档.zip";
								let file = {
									uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
									name: this.form.qmsNo+"_ESB_投产文档.zip", // 文件名
									status: 'done', // 状态有：uploading done error removed
								}
								const blob = new Blob([res.data]);
								const blobURL = window.URL.createObjectURL(blob);
								const aLink = document.createElement('a');
								aLink.href = blobURL;
								aLink.setAttribute('download', name);
												
								if (typeof aLink.download === 'undefined') {
									aLink.setAttribute('target', '_blank');
								}
								aLink.style.display = 'none';
								document.body.appendChild(aLink);
								aLink.click();
								document.body.removeChild(aLink);
								window.URL.revokeObjectURL(blob);
								this.visible = false;
							}).error(err=>{
								loading.close();
							}); 
					}
				});
			},
		}
	};
</script>

<style scope>
	.reequirementBody{
		padding:5px 10px;
		overflow: auto;
		max-height: 550px;
	} 
	
	
	
	.reequirementBody .el-input--mini .el-input__inner{
		height: 27px;
		line-height:28px;
	}
</style>
